<!--
 * @Date: 2024-03-13 18:29:44
 * @LastEditors: 陈俊宇 467724386@qq.com
 * @LastEditTime: 2024-11-11 09:48:46
-->
<template>
    <main id="sample">
        <QuillEditor
            theme="snow"
            :options="editorOptions"
            v-model:content="content"
            contentType="html"
        />
    </main>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

const emit = defineEmits(['update:modelValue'])

const editorOptions = {
    theme: 'snow',
    modules: {
        toolbar: false, // 隐藏工具栏
    },
    readOnly: false, // 设置为可编辑
}

onMounted(() => {})

const content = ref('')

watch(content, (val) => {
    if (val && val !== '<p><br></p>') {
        emit('update:modelValue', val)
    } else {
        emit('update:modelValue', '')
    }
})
</script>

<style scoped>
#sample {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 200px;
}
</style>
